<script setup lang="ts">

import {getFileImage} from "@/utils/fileUtils";

const showFileUploadPopup = defineModel({ required: true, default: false });

const props = defineProps<{
  fileList: File[],
}>();

const emits = defineEmits(['upload', 'close']);


const deleteFile = (index: number) => {
  props.fileList.splice(index, 1);
};

</script>

<template>
  <van-popup
      v-model:show="showFileUploadPopup"
      round
      closeable
      position="bottom"
      @closed="emits('close')"
      :style="{ height: '500px' }"
      teleport="#app"
  >
    <div class="share-content pt-[42px] px-[12px] pb-[2px] h-full">
      <van-row justify="center" align="center" class="file-row">
        <van-col span="6" v-for="(file, index) in fileList" :key="index">
          <svg-icon class="text-[45px]" :name="getFileImage(file.name)"/>
          <van-text-ellipsis :content="file.name" position="middle"/>
          <a @click="deleteFile(index)" style="color: red">删除</a>
        </van-col>
      </van-row>
      <van-row class="my-1" justify="space-between">
        <van-col span="12" class="button-col">
          <van-button @click="$emit('close')" type="danger" size="small">取消</van-button>
        </van-col>
        <van-col span="12" class="button-col">
          <van-button @click="$emit('upload', fileList)" type="primary" size="small">发送</van-button>
        </van-col>
      </van-row>
    </div>
  </van-popup>
</template>

<style scoped>
.share-content {
  height: 100%;
}

.file-row {
  height: 80%;
  max-height: 100%;
  overflow-y: auto;
}

svg {
  width: 100%;
  height: 100%;
}

.van-col {
  text-align: center;
}

</style>